
#####################################################################################
# MAKE SOME DISPLAY DATA AND SOME SIMPLE DISPLAY LOGIC
#####################################################################################

a = "AAA"
b = "BBB"
c = "CCC"
d = "DDD"


######################################################################################
## OUR ACTUAL 'TEMPLATES' INCLUDING BINDING AND BEHAVIOR
######################################################################################

direct_context_template =
  o.div(
    o.h2().text("Demonstrating passing a context in directly")
    o.p().text("The children of each context declaration recieve the full previous context stack.")
    o.p().text("Here context object is just a string.")
    o.ul(
      o.Context( a,
        o.li().text( (a) -> a )
        o.ul(
          o.Context( b,
            o.li().text( (b, a ) -> [b, a] )
            o.div().text((b) -> "A selector function can take one or more arguments from the stack as needed.")
          )
        )
      )
    )
  )

direct_context_template.write( document.getElementById("execution") )


list_model = {
  SlotName : "Demonstrating context provided by List"
  items : [a, b, c, d]
}
notes = [
  "Here we're doing assignment via simple expressions."
  "A List will pass the appropriate context to each instance of its child template"
]

template =
  o.Context( list_model,
    o.div(
      o.h3().text( (data) -> data.SlotName )
      # Here we're doing a direct assignment, the p's context stack will be ([ notes[i], list_model])
      o.List( notes,
        o.p().text( (note) -> note )
      )
      o.ul(
        o.List( ((data) -> data.items ),
          o.li(
            o.span().text((item) -> "Current Context: #{item}")
            o.p().text((args...) -> "  - Context Stack: #{JSON.stringify(args)}")
          )
        )
      )
    )
  )

template.write( document.getElementById("execution2") )
